<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Minimap 缩略图</title>
  <style>::-webkit-scrollbar {
    display: none;
  }

  html, body {
    overflow: hidden;
    margin: 0;
    width: 100%;
    height: 100%;
    background: #00092C;
  }

  .level4 {
    /*width: 60px;*/
    /*height: 60px;*/
    /*background: #aae;*/
    margin: 40px auto;
    display: inline-block;
    position: relative;
  }

  .level3 {
    /*background: #fa0;*/
    margin: 40px auto;
    display: inline-block;
    text-align: center;
    position: relative;
  }

  .level2 {
    /*background: #0df;*/
    margin: 40px auto;
    display: inline-block;
    text-align: center;
    position: relative;
  }

  .level1 {
    /*background: #ddd;*/
    margin: 40px auto;
    display: inline-block;
    text-align: center;
    position: relative;
  }

  .number {
    width: 70px;
    height: 60px;
    background: #aaa;
    margin: 0 auto;
    position: relative;
  }

  .number:before {
    display: block;
    content: "";
    width: 1px;
    height: 20px;
    position: absolute;
    left: 50%;
    top: -20px;
    background: #5FAF57;
  }

  .level1 > .number:before {
    display: none;
  }

  .level4:before {
    display: block;
    content: "";
    width: 1px;
    height: 20px;
    position: absolute;
    left: 50%;
    top: -20px;
    background: #5FAF57;
  }

  .number:after {
    display: block;
    content: "";
    width: 1px;
    height: 20px;
    position: absolute;
    left: 50%;
    top: 100%;
    background: #5FAF57;
  }

  .levelLineLeft {
    position: absolute;
    width: calc(50% + 6px);
    height: 1px;
    right: 50%;
    top: -20px;
    background: #5FAF57;
  }

  .levelLineRight {
    position: absolute;
    width: calc(50% + 6px);
    height: 1px;
    left: 50%;
    top: -20px;
    background: #5FAF57;
  }

  .firstLevel > .levelLineLeft {
    display: none;
  }

  .lastLevel > .levelLineRight {
    display: none;
  }
  .level4>.number:after{
    display: none;
  }
  .level1 > .number {
    width: 150px;
    height: 130px;
    background: url("./test/screenTopo1.png") no-repeat;
    background-size: 100% 100%;
  }

  .level2 > .number {
    background: url("./test/screenTopo2.png") no-repeat;
    background-size: 100% 100%;
  }

  .level3 > .number {
    background: url("./test/screenTopo3.png") no-repeat;
    background-size: 100% 100%;
  }

  .level4 > .number {
    background: url("./test/screenTopo4.png") no-repeat;
    background-size: 100% 100%;
  }
  </style>
</head>
<body>
<div style="width: 3000px;overflow: auto;height: 100%;">
  <div class="level1">
    <div class="number"></div>
    <div>
      <div class="level2 firstLevel">
        <div class="levelLineLeft"></div>
        <div class="levelLineRight"></div>
        <div class="number"></div>
        <div>
          <div class="level3 firstLevel">
            <div class="levelLineLeft"></div>
            <div class="levelLineRight"></div>
            <div class="number"></div>
            <div>
              <div class="level4 firstLevel">
                <div class="number"></div>
                <div class="levelLineLeft"></div>
                <div class="levelLineRight"></div>
              </div>
              <div class="level4 lastLevel">
                <div class="number"></div>
                <div class="levelLineLeft"></div>
                <div class="levelLineRight"></div>
              </div>
            </div>
          </div>
          <div class="level3">
            <div class="levelLineLeft"></div>
            <div class="levelLineRight"></div>
            <div class="number"></div>
            <div>
              <div class="level4 firstLevel">
                <div class="number"></div>
                <div class="levelLineLeft"></div>
                <div class="levelLineRight"></div>
              </div>
              <div class="level4">
                <div class="number"></div>
                <div class="levelLineLeft"></div>
                <div class="levelLineRight"></div>
              </div>
              <div class="level4 lastLevel">
                <div class="number"></div>
                <div class="levelLineLeft"></div>
                <div class="levelLineRight"></div>
              </div>
            </div>
          </div>
          <div class="level3 lastLevel">
            <div class="levelLineLeft"></div>
            <div class="levelLineRight"></div>
            <div class="number"></div>
            <div>
              <div class="level4 firstLevel">
                <div class="number"></div>
                <div class="levelLineLeft"></div>
                <div class="levelLineRight"></div>
              </div>
              <div class="level4">
                <div class="number"></div>
                <div class="levelLineLeft"></div>
                <div class="levelLineRight"></div>
              </div>
              <div class="level4 lastLevel">
                <div class="number"></div>
                <div class="levelLineLeft"></div>
                <div class="levelLineRight"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="level2">
        <div class="levelLineLeft"></div>
        <div class="levelLineRight"></div>
        <div class="number"></div>
        <div>
          <div class="level3 firstLevel">
            <div class="levelLineLeft"></div>
            <div class="levelLineRight"></div>
            <div class="number"></div>
            <div>
              <div class="level4 firstLevel">
                <div class="number"></div>
                <div class="levelLineLeft"></div>
                <div class="levelLineRight"></div>
              </div>
              <div class="level4 lastLevel">
                <div class="number"></div>
                <div class="levelLineLeft"></div>
                <div class="levelLineRight"></div>
              </div>
            </div>
          </div>
          <div class="level3 lastLevel">
            <div class="levelLineLeft"></div>
            <div class="levelLineRight"></div>
            <div class="number"></div>
            <div>
              <div class="level4 firstLevel">
                <div class="number"></div>
                <div class="levelLineLeft"></div>
                <div class="levelLineRight"></div>
              </div>
              <div class="level4">
                <div class="number"></div>
                <div class="levelLineLeft"></div>
                <div class="levelLineRight"></div>
              </div>
              <div class="level4 lastLevel">
                <div class="number"></div>
                <div class="levelLineLeft"></div>
                <div class="levelLineRight"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="level2 lastLevel">
        <div class="levelLineLeft"></div>
        <div class="levelLineRight"></div>
        <div class="number"></div>
        <div>
          <div class="level3 firstLevel">
            <div class="levelLineLeft"></div>
            <div class="levelLineRight"></div>
            <div class="number"></div>
            <div>
              <div class="level4 firstLevel">
                <div class="number"></div>
                <div class="levelLineLeft"></div>
                <div class="levelLineRight"></div>
              </div>
              <div class="level4 lastLevel">
                <div class="number"></div>
                <div class="levelLineLeft"></div>
                <div class="levelLineRight"></div>
              </div>
            </div>
          </div>
          <div class="level3 lastLevel">
            <div class="levelLineLeft"></div>
            <div class="levelLineRight"></div>
            <div class="number"></div>
            <div>
              <div class="level4 firstLevel">
                <div class="number"></div>
                <div class="levelLineLeft"></div>
                <div class="levelLineRight"></div>
              </div>
              <div class="level4">
                <div class="number"></div>
                <div class="levelLineLeft"></div>
                <div class="levelLineRight"></div>
              </div>
              <div class="level4 lastLevel">
                <div class="number"></div>
                <div class="levelLineLeft"></div>
                <div class="levelLineRight"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>
